<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="uni-flex uni-row" v-for="i in 10" :key="i" @click="navToDetailPage(item.id)">
				<view class="flex-item uni-bg-red fe-left">
					<image
						class="le-img"
						style="background-image: url('https://img.alicdn.com/imgextra/i2/86116873/TB2KMN0plUSMeJjy1zjXXc0dXXa_!!86116873-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp');"
						mode=""
					></image>
				</view>
				<view class="flex-item right">
					<view class="title">仿真花假花绢花玫瑰绣球花玻璃瓶套装组合客厅卧室办公室家居摆件</view>
					<view class="price">￥100</view>
					<uni-icon type="star-filled" size="25" color="#f17342" @click="setCollection(item.id)"></uni-icon>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
export default {
	data() {
		return {
			backimg: 'translateY(0px)',
			coverTransition: '0s',
			moving: false
		};
	},

	methods: {
		navToDetailPage(data) {
			//测试数据没有写id，用title代替
			let id = data;
			uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		}
	},
	components: { uniIcon }
};
</script>
<style lang="scss">
.flex-item {
	height: 240upx;
	text-align: left;
	// line-height: 200upx;
	margin: 8upx;
	background-color: #ffffff;
	border-radius: 4upx;
}
.uni-row {
	.fe-left {
		width: 240upx;
		.le-img {
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			border-radius: 20upx;
		}
	}
	.right {
		padding: 5px;
		width: 80%;
		.price {
			color: red;
			font-weight: 600;
		}
	}
}
</style>
